<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.weui-cells__title {
		margin-top: .77em;
		margin-bottom: .3em;
		padding-left: 15px;
		padding-right: 15px;
		color: #999;
		font-size: 14px;
	}
</style>
<body>

<header class="mui-bar mui-bar-nav">
	<a id="back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>订单中心</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="z-index: 9999;position: fixed;margin-top:0px">
		<a class="mui-control-item " href="#allorder">全部订单</a>
		<a class="mui-control-item" href="#workingorder">待完工</a>
		<a class="mui-control-item" href="#payingorder">待付款</a>
		<a class="mui-control-item" href="#commentingorder">待评价</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" style="margin-top: 38px;z-index:9999;position:fixed"></div>
	<div class="mui-slider-group" style="margin-top: 38px">
			<!--所有的订单-->
			<div  id="allorder"  class="mui-slider-item mui-control-content ">
				<div onclick="orderdetail(this)" th:each="order: ${order}">
					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px">订单编号:<span class="orderdetail" th:text="${order.oid}"></span></p>
							</div>
							<div class="weui-cell__ft type" th:data="${order.stat}"  th:text="${order.ordertype}"></div>
						</div>
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" style="line-height: 2">
							<a>
								<div class="weui-flex">
									<img class="mui-media-object mui-pull-left" style="width: 50px" th:src="@{/img/fenlei/indexicon1.png}"/>
									<div class="mui-media-body" style="white-space: normal;">
										<span th:text="${order.servitemname}"></span>
									</div>
								</div>
								<p style="color: darkslategrey"><i class="fa fa-building fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;门店:<span style="color: #003366" th:text="${order.chnname}"></span></p>
								<p style="color: darkslategrey"><i class="fa fa-clock-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;时间:<span style="color: #003366" th:text="${#dates.format(order.cometime, 'yyyy-MM-dd hh:mm:ss')}"></span></p>
							</a>
						</li>
					</ul>

					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px" class="mui-pull-right">共有<span style="color: red"><font size="4" th:text="${order.servicesnum}"></font></span>种服务  合计:</p>
							</div>
							<div class="weui-cell__ft" style="color: red" th:text="'￥'+${order.realfee}"></div>
						</div>
					</div>
					<div class="weui-cells__title"></div><!--间隔一下-->
				</div>
			</div>
			<!--待完工的订单-->
			<div id="workingorder"  class="mui-slider-item mui-control-content">
				<div onclick="orderdetail(this)" th:each="order: ${workingorder}">
					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px">订单编号:<span class="orderdetail" th:text="${order.oid}"></span></p>
							</div>
							<div class="weui-cell__ft type" th:data="${order.stat}"  th:text="${order.ordertype}"></div>
						</div>
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" style="line-height: 2">
							<a>
								<div class="weui-flex">
									<img class="mui-media-object mui-pull-left" style="width: 50px" th:src="@{/img/fenlei/indexicon1.png}"/>
									<div class="mui-media-body" style="white-space: normal;">
										<span th:text="${order.servitemname}+'...'"></span>
									</div>
								</div>
								<p style="color: darkslategrey"><i class="fa fa-building fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;门店:<span style="color: #003366" th:text="${order.chnname}"></span></p>
								<p style="color: darkslategrey"><i class="fa fa-clock-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;时间:<span style="color: #003366" th:text="${#dates.format(order.cometime, 'yyyy-MM-dd hh:mm:ss')}"></span></p>
							</a>
						</li>
					</ul>

					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px" class="mui-pull-right">共有<span style="color: red"><font size="4" th:text="${order.servicesnum}"></font></span>种服务  合计:</p>
							</div>
							<div class="weui-cell__ft" style="color: red" th:text="'￥'+${order.realfee}"></div>
						</div>
					</div>
					<div class="weui-cells__title"></div><!--间隔一下-->
				</div>
			</div>
			<!--待付款的订单-->
			<div id="payingorder"  class="mui-slider-item mui-control-content">
				<div onclick="orderdetail(this)" th:each="order: ${payingorder}">
					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px">订单编号:<span class="orderdetail" th:text="${order.oid}"></span></p>
							</div>
							<div class="weui-cell__ft type" th:data="${order.stat}" th:text="${order.ordertype}"></div>
						</div>
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" style="line-height: 2">
							<a>
								<div class="weui-flex">
									<img class="mui-media-object mui-pull-left" style="width: 50px" th:src="@{/img/fenlei/indexicon1.png}"/>									<div class="mui-media-body" style="white-space: normal;">
										<span th:text="${order.servitemname}+'...'"></span>
									</div>
								</div>
								<p style="color: darkslategrey"><i class="fa fa-building fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;门店:<span style="color: #003366" th:text="${order.chnname}"></span></p>
								<p style="color: darkslategrey"><i class="fa fa-clock-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;时间:<span style="color: #003366" th:text="${#dates.format(order.cometime, 'yyyy-MM-dd hh:mm:ss')}"></span></p>
							</a>
						</li>
					</ul>

					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px" class="mui-pull-right">共有<span style="color: red"><font size="4" th:text="${order.servicesnum}"></font></span>种服务  合计:</p>
							</div>
							<div class="weui-cell__ft" style="color: red" th:text="'￥'+${order.realfee}"></div>
						</div>
					</div>
					<div class="weui-cells__title"></div><!--间隔一下-->
				</div>
			</div>

			<!--待评价的订单-->
			<div id="commentingorder" class="mui-slider-item mui-control-content">
				<div onclick="orderdetail(this)" th:each="order: ${commentingorder}">
					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px">订单编号:<span class="orderdetail" th:text="${order.oid}"></span></p>
							</div>
							<div class="weui-cell__ft type" th:data="${order.stat}"  th:text="${order.ordertype}"></div>
						</div>
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" style="line-height: 2">
							<a>
								<div class="weui-flex">
									<img class="mui-media-object mui-pull-left" style="width: 50px" th:src="@{/img/fenlei/indexicon1.png}"/>
									<div class="mui-media-body" style="white-space: normal;">
										<span th:text="${order.servitemname}+'...'"></span>
									</div>
								</div>
								<p style="color: darkslategrey"><i class="fa fa-building fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;门店:<span style="color: #003366" th:text="${order.chnname}"></span></p>
								<p style="color: darkslategrey"><i class="fa fa-clock-o fa-lg" style="color: black;padding-top: 5px"></i>&nbsp;&nbsp;时间:<span style="color: #003366" th:text="${#dates.format(order.cometime, 'yyyy-MM-dd hh:mm:ss')}"></span></p>
							</a>
						</li>
					</ul>

					<div class="weui-cells weui-cell_access" style="margin-top: 0px">
						<div class="weui-cell" style="line-height:1">
							<div class="weui-cell__bd">
								<p style="margin-bottom: 0px" class="mui-pull-right">共有<span style="color: red"><font size="4" th:text="${order.servicesnum}"></font></span>种服务  合计:</p>
							</div>
							<div class="weui-cell__ft" style="color: red" th:text="'￥'+${order.realfee}"></div>
						</div>
					</div>
					<div class="weui-cells__title"></div><!--间隔一下-->
				</div>
			</div>
	</div>
	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->

</div>

</body>
<script>
	/*订单详情*/
	function orderdetail($this) {
	    /*所在订单的oid*/
	    var oid=$($this).find(".orderdetail").text();
        var type=$($this).find(".type").attr('data');
        if(type==9){
            location.href="/person/commentorderdetail?oid="+oid;
		}else{
            location.href="/person/orderdetail?oid="+oid;
		}

    }
    
    $("#back").click(function () {
		location.href="/person/personhome";
    })

    $(".mui-control-item").click(function () {
        var id=$(this).attr('href');
        var gallery = mui('.mui-slider').slider();
        if(id=="#allorder"){
            gallery.gotoItem(0);
        }
        if(id=="#workingorder"){
            gallery.gotoItem(1);
        }
        if(id=="#payingorder"){
            gallery.gotoItem(2);
        }
        if(id=="#commentingorder"){
            gallery.gotoItem(3);
        }
    });

</script>
</html>
